<!-- 财务打款凭证 -->
<template>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="submitFn"
    title="财务打款凭证"
    unmount-on-close
    :mask-closable="false"
    width="65vw"
  >
    <page-form :model="form" layout="vertical">
      <page-row>
        <page-form-item label="财务打款备注" size="1">
          <a-textarea class="w-full" placeholder="请输入" :max-length="400" v-model="form.payRemark" auto-size />
        </page-form-item>
        <page-form-item label="打款凭证（支持上传jpg、png格式，最多上传10张）" size="1">
          <upload-img v-model="form.payFileIdList" :limit="10" />
        </page-form-item>
      </page-row>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="submitFn">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup name="OperateCostFinanceRemit">
  import { Message } from '@arco-design/web-vue'
  import { getCostDetailApi, updatePayFileApi } from '@/api/business/operateCost'
  import { ref } from 'vue'

  const form = ref({})
  // 打开弹窗
  const showModal = ref(false)
  const open = (val) => {
    // 重置
    resetForm()
    showModal.value = true
    getDetail(val)
  }
  const onClose = () => {
    showModal.value = false
  }
  const resetForm = () => {
    form.value = {}
  }

  defineExpose({
    open,
  })
  const emit = defineEmits(['feepageConfirm'])
  // 确认提交财务打款凭证
  const submitFn = () => {
    const param = {
      id: form.value.id,
      payFileIdList: form.value.payFileIdList,
      payRemark: form.value.payRemark,
    }
    updatePayFileApi(param).then((res) => {
      emit('feepageConfirm')
      Message.success(res.message)
      showModal.value = false
    })
  }
  const getDetail = (val) => {
    getCostDetailApi({
      id: val.id,
    }).then((res) => {
      form.value = res.result
    })
  }
</script>

<style lang="less" scoped></style>
